.uploadPage {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  
  .cardContainer {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  
  .contentContainer {
    display: flex;
    gap: 24px;
    flex: 1;
    height: 100%;
  }
  
  .section {
    flex: 1;
  }
  
  .confirmContainer {
    padding: 16px;
    display: flex;
    justify-content: center;
    border-top: 1px solid #f0f0f0;
  }
  
  .confirmButton {
    width: 200px;
    height: 40px;
    font-size: 16px;
  }

.uploadContainer {
  width: 100%;
  height: 100%;
  
  :global {
    .ant-upload-drag {
      height: 300px;
      border: 2px dashed #d9d9d9;
      border-radius: 8px;
      background: #fafafa;
      transition: all 0.3s;

      &:hover {
        border-color: #1890ff;
      }
    }

    .ant-upload-list {
      margin-top: 16px;

      &-picture-card {
        .ant-upload-list-item {
          padding: 8px;
          border: 1px solid #d9d9d9;
          border-radius: 8px;

          &:hover {
            border-color: #1890ff;
          }

          &-thumbnail {
            img {
              object-fit: cover;
            }
          }
        }
      }
    }

    .ant-upload-list-item-actions {
      .anticon {
        color: #fff;
        font-size: 16px;
        
        &:hover {
          color: #1890ff;
        }
      }
    }
  }
}

.uploadIcon {
  font-size: 48px;
  color: #1890ff;
}

.uploadText {
  margin: 16px 0;
  font-size: 16px;
}

.uploadHint {
  color: #666;
}

.previewRoot {
  :global {
    .ant-image-preview {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      z-index: 1000;
    }

    .ant-image-preview-mask {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-color: rgba(0, 0, 0, 0.9);
    }

    .ant-image-preview-img-wrapper{
      width: 1000px;
      height: 800px;
    }

    .ant-image-preview-wrap {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .ant-image-preview-img {
      max-width: 100vw !important;
      max-height: 100vh !important;
      object-fit: contain !important;
    }
  }
}

.imageContainer {
  position: relative;
  width: 100%;
  height: 300px;
  border-radius: 8px;
  overflow: hidden;
  background: #fafafa;
  border: 1px solid #d9d9d9;

  &:hover {
    .imageActions {
      opacity: 1;
    }
  }
}

.imageActions {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s;
}

.uploadButton {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  cursor: pointer;
  padding: 16px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.5);
  transition: all 0.3s;

  &:hover {
    background: rgba(0, 0, 0, 0.7);
  }

  .anticon {
    font-size: 24px;
    margin-bottom: 8px;
  }

  span {
    font-size: 14px;
  }
}